<template>
  <div>
    <transition name="fade-opacity">
      <div v-show="showRewordModal" @click.self="clickClose" class="c-pz1002 c-translucent-balck50 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-justify-center c-aligni-end">
        <transition name="fade-translate-y">
          <div v-show="showRewordModal" class="c-w100 c-bg-white" :class="modalType == 1 ? 'c-br-tr40 c-br-tl40' : 'c-br-tr20 c-br-tl20'">
            <header class="c-hh70 c-flex-row c-aligni-center">
              <span class="c-fs28 c-fw-b c-pl30 c-flex-grow1 c-w0 c-textAlign-c c-fw600">打赏</span>
              <i @click="clickClose" class="iconfont c-fs20 c-fc-gray c-hh70 c-ww70 c-flex-row c-flex-center">&#xe61b;</i>
            </header>
            <div class="c-bd-b1 ml30 mr30"></div>
            <section class="c-fs24 c-pt30 c-pb20 c-ph30 c-flex-row c-aligni-center c-fc-sblack" v-if="modalType == 1">
              <span class="c-bg-xblue c-ww5 c-br4 c-hh20 c-mr16"></span>选择讲师：{{
                noAdminTeacher.length != 0
                  ? noAdminTeacher[this.curIndex].dynamicName || noAdminTeacher[this.curIndex].realName || noAdminTeacher[this.curIndex].realName || noAdminTeacher[this.curIndex].userName
                  : ''
              }}
            </section>
            <section class="c-flex-row c-ph30" v-if="noAdminTeacher.length == 0 && modalType == 1">
              <div class="c-ph20 c-fc-sgray c-fs22 c-translucent-balck3 c-pv8 c-w100">哎呦~没有设置讲师，不接受打赏呦~</div>
            </section>
            <section class="c-flex-row" :class="noAdminTeacher.length > 3 ? '' : 'c-ph30'" v-else-if="noAdminTeacher.length > 0">
              <div v-if="noAdminTeacher.length > 3" :class="teaScrollLeft == 0 ? 'vis-hidden-important' : ''" class="c-hh150 c-ww70 c-flex-row c-flex-center c-rotate180">
                <i class="iconfont c-fc-sgray c-fs14">&#xe85a;</i>
              </div>
              <div ref="teaScroll" @scroll="onTeaScroll" class="c-flex-grow1 c-w0 c-contexty-hidden c-contextX-scroll c-ws-n">
                <div @click="clickChangeIndex(index)" v-for="(item, index) in noAdminTeacher" :key="index" class="c-p c-br4 c-inlineflex-column c-flex-center c-ww120 c-hh150 c-aligni-center"
                  :class="[index == noAdminTeacher.length - 1 ? '' : 'c-mr20', index == curIndex ? 'reword-bd1' : '']">
                  <!-- <img v-show="index == curIndex" class="c-ww30 c-hh30 c-pa c-p-b0 c-p-r0" src="@/assets/icon_selected.png" alt=""> -->
                  <img class="c-ww60 c-hh60 c-brp50 imgCloseBig c-bd1-mgray" :src="$addXossFilter(item.avatar, require('@/assets/no_login_head.png'))" />
                  <div class="c-fs22 c-pt10 c-ww80 c-textAlign-c c-text-ellipsis1">{{ item.dynamicName || item.realName || item.userName }}</div>
                </div>
              </div>
              <div v-if="noAdminTeacher.lenccgth > 3" :class="scrollToRight ? 'vis-hidden-important' : ''" class="c-hh150 c-ww70 c-flex-row c-flex-center">
                <i class="iconfont c-fc-c c-fs14">&#xe85a;</i>
              </div>
            </section>
            <!-- :class="modalType == 1 ? 'c-bg-vgreen' : 'reword-bg-red'" -->
            <section class="c-pt26 c-fs24 c-ph30 c-flex-row c-aligni-center c-fc-sblack">
              <span class="c-ww5 c-br4 c-hh20 c-mr16 c-bg-xblue"></span>
              <template v-if="rewardType == 1"> 打赏金额：{{ (curChooseMoneyIndex != -1 && moneyArray[curChooseMoneyIndex].price) || inputMoney }} </template>
              <template v-else> 选择礼物:{{ currGiftName }} </template>
            </section>
            <section class="c-flex-row c-flexw-wrap" v-show="rewardType == 1">
              <div class="c-ww120 c-hh60 c-flex-row c-flex-center c-fs24 c-br10 c-mt20 c-ml30" v-for="(item, index) in moneyArray" :key="index" @click="clickRewordItem(index)"
                :class="[curChooseMoneyIndex == index ? 'c-bg-f2 c-fw600' : 'c-bd1-mgray']">
                {{ '￥' | iosPriceFilter }}{{ item.price }}
              </div>
            </section>
            <section class="c-flex-row c-pl30 c-mb20 swiper" v-show="rewardType == 2">
              <swiper :options="swiperOption" class="swiper-gifts">
                <swiper-slide v-for="page of giftsPage" :key="page">
                  <div class="c-p gift-cell c-inlineflex-column c-flex-center c-flex-center c-fs24 c-br16 c-mt20" v-for="(item, index) in rewardGifts" :key="index"
                    v-if="index >= (page - 1) * giftsPageSize && index < page * giftsPageSize" @click="clickRewordGiveItem(item.price, item.icon, item.limit, item.lgcId, item.name)"
                    :class="[lgcId == item.lgcId ? 'active c-br20' : '']">
                    <div class="c-ww90 c-hh90"><img class="c-maxh c-maxw c-m-0auto" :class="item.limit == 0 ? 'gray' : ''" :src="$addXossFilter(item.icon)" alt="" /></div>
                    <div class="c-fc-xblack c-fs22 c-mt4">{{ item.name }}</div>
                    <div class="c-fc-gray c-fs18 c-mt4">{{ '￥' | iosPriceFilter }}{{ item.price }}</div>
                    <div class="c-fc-gray c-fs18 c-mt4" v-if="modalType == 2">{{ item.voteNum }}票</div>
                    <div v-if="item.limit != -1" class="c-pa c-p-t8 c-p-r8  c-pl5 c-pr5 c-hh20 numRediu c-fs16 c-textAlign-c c-lh22 c-fc-white" :class="item.limit == 0 ? 'c-bg-ccc' : 'c-bg-FF5355'">
                      {{ item.limit }}
                    </div>
                  </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
            </section>
            <section class="c-pv30 c-flex-row c-aligni-center ph35" v-show="rewardType == 1">
              <span class="c-fs24 c-pr20">自定义金额:</span>
              <input @blur="blurInput" id="inputReword" v-model="inputMoney" type="number" class="c-flex-grow1 c-w0 c-hh60 c-ph20 c-fs26 input needsclick"
                :placeholder="(isOpenIosGzhPay ? '￥' : '') + '0.01~1000'" />
            </section>
            <footer class="c-ph30 c-flex-row c-aligni-center c-fs22 c-bd-t1" :class="rewardType == 1 ? 'c-hh80' : 'c-hh108'">
              <span class="c-fc-xblack c-pr10" v-if="rewardType == 1">打赏金额：</span>
              <div class="c-flex-row c-aligni-center" v-else>
                <div class="c-ww30 c-hh30 c-mr16"><img :src="$addXossFilter(icon)" alt="" /></div>
                <div class="c-ww60 c-hh48 c-bg-f6 c-fs30 c-textAlign-c c-lh48 c-fc-gray c-mr2" @click="reduce">-</div>
                <div class="c-ww60 c-hh48 c-bg-f6 c-fs24 c-textAlign-c c-lh48 c-fc-xblack c-mr2">{{ totalmun }}</div>
                <div class="c-ww60 c-hh48 c-bg-f6 c-fs30 c-textAlign-c c-lh48 c-fc-gray" :class="modalType == 1 ? 'c-mr30' : 'c-mr20'" @click="addmun">+</div>
              </div>
              <span class="c-flex-grow1 c-w0" :class="rewardType == 1 ? 'c-fc-reword c-fw600' : 'c-fc-xxlred c-fs26'">{{ '￥' | iosPriceFilter }}{{ totalPrice }}</span>
              <!-- :class="GiftsNum || (modalType==1 && noAdminTeacher.length==0)?'c-bg-ccc':'reword-bg-red'" -->
              <div @click="clickGoReword(noAdminTeacher.length)" class="c-ww100 c-hh48 c-flex-row c-flex-center c-fc-white c-br25 c-bg-xblue">{{ modalType == 1 ? '打赏' : '赠礼' }}</div>
            </footer>
            <section v-if="modalType == 1 && companyAuth && (companyAuth.liveAnnual == 1 || companyAuth.enableShowInfo == 1)"
              class="c-w100 c-pb16 c-flex-row c-flex-row c-flex-center c-bg-white c-fs24">
              <img src="@/assets/cklogo.png" class="c-ww20 c-hh20" />
              <span class="c-fs18 c-fc-sgray c-pl4">创客匠人技术支持</span>
            </section>
          </div>
        </transition>
      </div>
    </transition>
    <pay-template v-if="showPay" :balance="balance" :totalPrice="totalPrice * 1" :isCanUseGiftCard="false" @clickPayType="clickPayType" @closePay="closePay"
      :enablePayMall="Number(balance) >= Number(totalPrice) && payConf.enablePayReward" :enableWxpay="!!(payConf.enableWxpay == 1)"></pay-template>
    <pay-password v-show="showPassword" :price="totalPrice" @hidePwd="hidePwd" @confirmPwd="confirmPwd"></pay-password>
  </div>
</template>

<script>
import PayPassword from '@/components/templates/common/pay/payPassword.vue';
import PayTemplate from "@/components/templates/common/pay/payTemplate.vue";
import { utilJs } from '@/utils/common.js';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
let isClick = false;
let orderId = '';
export default {
  inject: ['provideGetDynamicName'],
  components: {
    PayPassword,
    swiper,
    swiperSlide,
    PayTemplate
  },
  props: {
    socialRoomId: {
      type: String,
      default: ''
    },
    subSonProdId: {
      type: Number,
      default: 0
    },
    showRewordModal: {
      type: Boolean,
      default: false
    },
    rewardType: {
      type: String,
      default: ''
    },
    moneyArray: {
      type: Array,
      default: () => {
        return [];
      }
    },
    rewardGifts: {
      type: Array,
      default: () => {
        return [];
      }
    },
    teacherList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    modalType: {
      type: Number,
      default: 0 // 1直播 2投票
    },
    playId: {
      type: Number,
      default: ''
    },
    voteId: {
      type: Number,
      default: ''
    },
    enablePayReward: {
      //是否可以用余额打赏
      type: Boolean,
      default: true
    }
  },
  watch: {
    moneyArray(val) {
      if (val) {
        if (this.rewardType == 1) {
          this.clickRewordItem(0);
        }
      }
    },
    rewardGifts(val) {
      if (val) {
        if (this.rewardType == 2) {
          this.giftsPage = Math.ceil(this.rewardGifts.length / this.giftsPageSize);
          for (var item in this.rewardGifts) {
            if (this.rewardGifts[item].limit != 0) {
              this.clickRewordGiveItem(this.rewardGifts[item].price, this.rewardGifts[item].icon, this.rewardGifts[item].limit, this.rewardGifts[item].lgcId, this.rewardGifts[item].name);
              this.GiftsNum = false;
              return false;
            } else {
              this.inputMoney = '';
              this.curChooseMoney = '';
              this.curChooseMoneyIndex = -1;
              this.icon = '';
              this.currGiftName = '';
              this.limit = '';
              this.totalmun = 1;
              this.lgcId = '';
              this.GiftsNum = true;
            }
          }
        }
      }
    },
    showRewordModal(val) {
      if (val) {
        this.showPay = false;
        this.showPassword = false;
        this.password = false;
        this.payType = navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf('IOSNewApp') > -1 ? 1 : 0;
        this.getGoodsInfo();
      }
    },
    inputMoney(val) {
      if (val * 1 > 0) {
        this.curChooseMoney = '';
        this.curChooseMoneyIndex = -1;
      }
      if (val * 1 > 1000) {
        this.inputMoney = 1000;
      } else if (val * 1 < 0) {
        this.inputMoney = 0;
      }
      let valStr = val + '';
      let valArr = valStr.split('.');
      if (valArr.length == 2 && valArr[1].toString().length > 2) {
        let poiintStr = valArr[1].toString().substring(0, 2);
        let resultNum = valArr[0] + '.' + poiintStr;
        this.inputMoney = resultNum * 1;
      }
    },
    playId(val) {
      this.playId = val;
    },
    voteId(val) {
      this.voteId = val;
    }
  },
  computed: {
    totalPrice() {
      if (this.rewardType == 1) {
        return this.inputMoney * 1 || this.curChooseMoney;
      } else {
        let curChooseMoney = this.curChooseMoney.toString();
        let totalNum = this.totalmun.toString();
        let m = 0;
        if (curChooseMoney.split('.')[1] != undefined) {
          m += curChooseMoney.split('.')[1].length;
        }
        if (totalNum.split('.')[1] != undefined) {
          m += totalNum.split('.')[1].length;
        }
        return (Number(curChooseMoney.replace('.', '')) * Number(totalNum.replace('.', ''))) / Math.pow(10, m);
      }
    },
    noAdminTeacher() {
      let arr = this.teacherList.filter(t => {
        if (this.provideGetDynamicName) {
          t = this.provideGetDynamicName(t);
        }
        return t.isReward == 1;
      });
      return arr;
    }
  },
  data() {
    return {
      companyAuth: localStorage.getItem('companyAuth') && JSON.parse(localStorage.getItem('companyAuth')),
      isiOSApp: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf('IOSNewApp') > -1,
      teaScrollLeft: 0,
      scrollToRight: false,
      showPay: false,
      password: '',
      showPassword: false,
      balance: 0,
      payType: 0,
      curIndex: 0,
      inputMoney: '',
      curChooseMoney: '',
      curChooseMoneyIndex: -1,
      icon: '',
      currGiftName: '',
      totalmun: 1,
      limit: 0,
      lgcId: '',
      GiftsNum: false,
      giftsPage: 1,
      giftsPageSize: 8,
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      },
      isOpenIosGzhPay: utilJs.isOpenIosGzhPay('51'),
      playId: '',
      voteId: '',
      protocolInfo: null,
      isCheckAgreement: null,
      payConf: {},
    };
  },
  methods: {
    closePay() {
      this.showPay = false;
    },
    clickClose() {
      this.$emit('update:showRewordModal', false);
    },
    onTeaScroll() {
      let scrollDom = this.$refs.teaScroll;
      this.scrollToRight = scrollDom.scrollLeft + scrollDom.clientWidth >= scrollDom.scrollWidth;
      this.teaScrollLeft = scrollDom.scrollLeft;
    },
    clickChangeIndex(index) {
      this.curIndex = index;
    },
    clickGoReword(noTeacher) {
      if (noTeacher == 0 && this.modalType == 1) {
        this.$showCjToast({
          text: '哎呦~没有设置讲师，不接受打赏呦~',
          type: 'warn',
        });
        return;
      }
      if (this.rewardType == 1) {
        if (this.totalPrice * 1 == 0 || this.totalPrice * 1 > 1000) {
          let title = this.totalPrice * 1 > 1000 ? '打赏金额不能超过1000' : '请选择或输入打赏的金额';
          this.$showCjToast({
            text: title,
            type: 'warn',
          });
          return;
        }
      }
      if (this.GiftsNum) {
        this.$showCjToast({
          text: '没有礼物可以赠送',
          type: 'warn',
        });
        return;
      }
      if (Number(this.totalPrice).toFixed(2) == 0) {
        this.getOrderId();
      } else {
        this.showPay = true;
        this.clickClose();
      }
    },
    //输入框失去焦点
    blurInput(e) {
      setTimeout(() => {
        document.body.scrollTop = 0;
        window.scrollTo(0, 0);
      }, 300);
    },
    clickRewordItem(index) {
      this.curChooseMoneyIndex = index;
      this.inputMoney = '';
      this.curChooseMoney = this.moneyArray[index].price;
      this.icon = '';
      this.limit = '';
      this.totalmun = 1;
      this.lgcId = '';
    },
    clickRewordGiveItem(money, icon, limit, lgcId, giftName) {
      if (limit == 0) {
        this.$showCjToast({
          text: '该礼物赠送次数已达到上限！',
          type: 'warn',
        });
        return;
      }
      this.inputMoney = '';
      this.curChooseMoneyIndex = -1;
      this.curChooseMoney = money;
      this.icon = icon;
      this.currGiftName = giftName;
      this.limit = limit;
      this.totalmun = 1;
      this.lgcId = lgcId;
    },
    clickPayType(payType) {
      this.payType = payType;
      this.getOrderId();
    },
    getGoodsInfo() {
      utilJs.getMethod(`${global.apiurl}members/myIncome`, res => {
        this.balance = res.data.balance;
        this.payConf = res.payConf;
      });
    },
    hidePwd() {
      this.showPassword = false;
    },
    confirmPwd(pwd) {
      this.password = pwd;
      this.yuePay();
    },
    getOrderId() {
      if (isClick) {
        return;
      }
      if (!this.isCheckAgreement && this.protocolInfo && Number(this.totalPrice).toFixed(2) != 0) {
        this.$showCjToast({
          text: '请勾选协议后提交订单',
          type: 'warn',
        });
        return;
      }
      isClick = true;

      let data = {
        fromInvite: 0,
        usePoint: 0,
        useCoupon: -1,
        prodType: this.modalType == 2 ? 178 : 35,
        groupId: this.modalType == 2 ? '' : this.noAdminTeacher[this.curIndex].userId || '',
        inviteId: localStorage.getItem('refereeId') || -1, //社群邀请人ID，用来绑定邀请进社群的关系
        prodId: this.modalType == 2 ? this.voteId : this.socialRoomId || '',
        lgcId: this.lgcId,
        number: this.totalmun,
        payMoney: Number(this.totalPrice).toFixed(2),
        payMethod: this._getPayMap(this.payType),
        playId: this.playId || '',
        subSonProdId: this.subSonProdId
      };
      if (Number(this.totalPrice).toFixed(2) == 0) {
        data.payMethod = 2;
      }
      //携带当前进入的时候的分享人id过去后端做数据分析
      const xTraceSid = sessionStorage.getItem('shareFromUserId') || '';
      if (xTraceSid) {
        data['x-trace-sid'] = xTraceSid;
      }
      utilJs.postMethod(
        `${global.apiurl}orders/submitOrder`,
        data,
        res => {
          isClick = false;
          orderId = res.orderId;
          if (orderId == -1) {
            this.$showCjToast({
              text: '订单提交失败，请重新提交！',
              type: 'warn',
            });
            return;
          }
          if (Number(this.totalPrice).toFixed(2) != 0) {
            if (this.payType == 1) { //账户余额支付
              this.showPassword = true;
            } else if (this.payType == 3) { //支付宝支付
              this.showPay = false;
              utilJs.postMethod(global.apiurl + "payment/alipayConf", { orderId: orderId }, (aliRes) => {
                this.$routerGo(this, "replace", { path: "/homePage/course/aliPayMiddlePage", query: { orderId: aliRes.orderNo } });
              });
            } else {
              this.wePay();
            }
          } else {
            this.clickClose();
            if (this.modalType == 2) {
              this.$emit('reGetData');
              this.$emit('freeSuccessTip');
            }
          }
        },
        failRes => {
          isClick = false;
        }
      );
    },
    //支付方式映射
    _getPayMap(type) {
      let val = 1; //payType:0-微信支付（1）  1-账户余额（2） 3-支付宝支付（20）
      switch (type) {
        case 0: //微信支付
          val = 1;
          break;
        case 1: //账户余额支付
          val = 2;
          break;
        case 3: //支付宝支付
          val = 20;
          break;
        default:
          val = 1;
      }
      return val;
    },
    yuePay() {
      if (this.password == '') {
        this.$showCjToast({
          text: '请输入支付密码',
          type: 'warn',
        });
        return;
      } else if (this.orderId == -1) {
        this.$showCjToast({
          text: '订单提交失败，请重新提交！',
          type: 'warn',
        });
        return;
      }
      let data = {
        orderId: orderId,
        payPwd: this.password
      };
      let that = this;
      utilJs.yuePay(
        data,
        function () {
          that.showPassword = false;
          that.$showCjToast({
            text: '支付成功',
            type: 'success',
          }).then(() => {
            that.showPay = false;
            that.clickClose();
            if (that.modalType == 2) {
              //投票打赏
              that.$emit('reGetData');
            }
          });
        },
        function () { }
      );
    },
    wePay() {
      if (orderId == -1) {
        this.$showCjToast({
          text: '订单生成失败，请重新提交订单',
          type: 'warn',
        });
        return;
      }
      let data = {
        orderId: orderId
      };
      let that = this;
      let u = navigator.userAgent;
      let isAndroid = u.indexOf('APPLogin') > -1; //android终端
      let isiOS = u.indexOf('IOSLogin') > -1; //ios终端
      let isNewiOS = u.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf('IOSNewApp') > -1; //ios终端
      if (isAndroid == true || isiOS == true || isNewiOS == true) {
        utilJs.appPay(data, 'FALSE', 0, this.ckFrom, 0, '');
      } else {
        let goUrl = this.$route.fullPath ? window.location.href.split('#')[0] + '#' + this.$route.fullPath : window.location.href;
        data.goUrl = goUrl;
        utilJs.wechatPay(data, function () {
          that.showPay = false;
          that.clickClose();
          if (that.modalType == 2) {
            //投票打赏
            that.$emit('reGetData');
          }
        });
      }
    },
    reduce() {
      if (this.totalmun > 1) {
        this.totalmun--;
      } else {
        this.$showCjToast({
          text: '礼物数目不能小于1',
          type: 'warn',
        });
      }
    },
    addmun() {
      if (this.limit > 0) {
        if (this.totalmun < this.limit) {
          this.totalmun++;
        } else {
          this.$showCjToast({
            text: '礼物数目不能超过限制',
            type: 'warn',
          });
        }
      } else {
        this.totalmun++;
      }
    },
    getPayProtocol() {
      utilJs.getMethod(`${global.apiurl}protocols/getProtocolByProdType?prodType=-1`, res => {
        this.protocolInfo = res.protocol && res.protocol.length > 0 ? res.protocol : null;
        this.isCheckAgreement = true;
      });
    },
    clickProtocol(item) {
      this.$routerGo(this, 'push', { path: `/homePage/agent/protocolInfo`, query: { protocolId: item.protocolId } });
    },
    changeCheckAgreement() {
      this.isCheckAgreement = !this.isCheckAgreement;
    }
  },
  activated() {
    this.curIndex = 0;
    this.playId = '';
    this.voteId = '';
    this.inputMoney = '';
    this.curChooseMoneyIndex = -1;
    this.curChooseMoney = '';
    this.isOpenIosGzhPay = utilJs.isOpenIosGzhPay('51');
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
.reword-bd1 {
  width: pxToRem(112);
  height: pxToRem(134);
  opacity: 1;
  background: #f2f2f2;
  border-radius: 8px;
}
.reword-fc-red {
  color: #ff5252;
}
.reword-bg-red {
  background-color: #ff5252;
}
.ph35 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.input {
  background: none;
  border: 1px solid #e5e5e5;
}
.my-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  padding-top: 3rem;
  max-width: 16rem;
  margin: auto;
  right: 0;
}

.bg-masker {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.my-content {
  position: absolute;
  bottom: 0;
  height: 9.75rem;
  z-index: 1;
  width: 100%;
  background-color: #fff;
}

.my-content1 {
  position: absolute;
  bottom: 0;
  height: 13.2rem;
  z-index: 1;
  width: 100%;
  background-color: #fff;
}

.gift-cell {
  width: pxToRem(145);
  height: pxToRem(180);
  &.active {
    background: #f2f2f2;
  }
}

.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
.numRediu {
  border-radius: 0.25rem 0.25rem 0.25rem 0px;
  background: linear-gradient(270deg, #ff7225, #fbb449);
}

.swiper-gifts {
  padding: 0 0 0.5rem 0;
}
.swiper-gifts .swiper-pagination {
  bottom: 0;
}
.swiper .swiper-gifts {
  width: 100% !important;
}
.swiper >>> .swiper-slide {
  width: 100% !important;
}
.hh220 {
  height: 5.5rem !important;
}
.nowrap {
  flex-wrap: nowrap !important;
}
</style>
